<template>
  <div class="app-container calendar-list-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search"/>
    </section>
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-col :span="15">
          <el-button class="filter-item" type="primary" size="small" @click="haveTop(1)">置顶</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="haveTop(0)">取消置顶</el-button>
        </el-col>
        <el-col :span="9">
          <section style="float: right">
            <el-button class="filter-item" type="danger" size="small" @click="delRows">批量删除</el-button>
            <el-button class="filter-item" type="primary" size="small" @click="openForm('add')">发布信息</el-button>
          </section>
        </el-col>
      </el-row>
    </section>
    <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" width="30">
        <template slot-scope="scope">
          <i class="iconfont ali-zhiding" v-show="scope.row.top_status == 1"></i>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="notice_title" label="主题" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="发布时间" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.create_time }}</template>
      </el-table-column>
      <!-- <el-table-column prop="browse" label="浏览量" show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore(scope.row)">{{scope.row.browse}}</div>
            </template>
          </el-table-column> -->
      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <i @click="openForm('edit',scope.row)" class="iconfont ali-bianji"></i>&nbsp;&nbsp;
          <i @click="handleDelete(scope.row)" class="iconfont ali-bin"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
    <!-- 创建活动模板 -->
    <section>
      <el-dialog :visible.sync="dialog.isShow" :show-close="false" :fullscreen="fullscreen" width="900px" :before-close="beforeClose">
        <el-row slot="title">
          <el-col :span="10" style="padding-top: 5px">
            <span style="font-size: 18px;">{{dialog.title}}</span>
          </el-col>
          <el-col :span="2" :offset="11">
            <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
            <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
          </el-col>
          <el-col :span="1">
            <el-button type="text" icon="iconfont ali-guanbi" @click="dialog.isShow = false" style="float: right"></el-button>
          </el-col>
        </el-row>
        <el-form :model="addForm" ref="addForm" label-width="90px">
          <el-form-item label="标题" prop="notice_title" :rules="filter_rules({required:true})">
            <el-input clearable style="width: 300px;" v-model.trim="addForm.notice_title" placeholder="公告标题"></el-input>
          </el-form-item>
          <el-form-item label="公告内容">
            <UE @showUpload="showUpload" :defaultMsg.sync='defaultMsg' ref="ue"></UE>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialog.isShow = false">取消</el-button>
          <el-button plain @click="save('addForm')">保存并发布</el-button>
        </span>
      </el-dialog>
    </section>
    <section>
      <UeUpload ref="vupload" @addUeditorImg="addUeditorImg" img="卐" title="添加图片"></UeUpload>
    </section>
  </div>
</template>
<script>
import UE from '@/components/Ueditor';
import sizeTemp from '@/components/draggableSize'
import UeUpload from '@/components/UeUpload'
import { searchTool } from '@/utils'
import SoPagination from '@/components/SoPagination'
import SoToolBar from '@/components/SoToolBar'
import { notice_list, notice_edit, notice_save, notice_delete, notice_updateTopStatus, notice_deleteAll } from '@/api/notice'
import { toolData } from './publish'

export default {
  components: { UE, SoPagination, SoToolBar, sizeTemp, UeUpload },
  name: "component_name",
  data() {
    return {
      toolData: toolData, //搜索工具栏初始化
      fullscreen: false,
      loading: false,
      fromStatus: '',//判断打开的是新增还是编辑
      multipleSelection: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      dialogVisible: false,
      dialog: { isShow: false },
      tableList: [],
      addForm: {},
      defaultMsg: ''
    };
  },
  methods: {
    showUpload(){
      this.$refs.vupload.open()
    },
    addUeditorImg(val){
      this.$refs.ue.addToContent(`<img src="${val}">`)
    },
    beforeClose(done){
      this.$refs.ue.clear();
      done()
    },
    async haveTop(e) {//1置顶 0取消
      if (this.multipleSelection.length == 0) {
        this.$message.warning('请先选择需要调整单元');
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      this.loading = true;
      let { data } = await notice_updateTopStatus({ ids: ids, top_status: e });
      this.loading = false;
      if (data.status == 100) {
        await this.initList();
        this.$message.success('操作成功')
      }
    },
    async delRows(){//批量删除
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整单元");
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      try {
        const res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          const { data } = await notice_deleteAll({array: ids});
          if (data.status == 100) {
            this.$message.success("删除成功");
          }
          this.initList();
        }
      } catch (error) {
        console.log(error, "error");
      }
    },
    async handleDelete(row) {
      let res = await this.$confirm('确认删除吗');
      if (res == 'confirm') {
        this.loading = true;
        let { data } = await notice_delete({ id: row.id });
        if (data.status == 100) {
          this.$message.success('删除成功');
        }
        this.initList();
        this.loading = false;
      }
    },
    getMore(row) {
      this.dialogVisible = true;
    },
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    async initList() {
      this.loading = true;
      const query = {...this.listQuery, company_id: localStorage.getItem('companyId') - 0};
      const { data } = await notice_list(query);
      this.loading = false;
      let result = data.data;
      if (data.status == 100) {
        this.tableList = result.rows;
        this.listQuery.total = result.results;
      }
    },
    search() {//搜索
      this.listQuery = searchTool(this.listQuery);
      this.initList();
    },
    save(e) {// 发布公告
      this.addForm.notice_content = this.$refs.ue.getContent();//富文本内容
      this.$refs[e].validate(valid => {
        if (valid) {
          this.saveObj();
          this.dialog.isShow = false
        } else {
          return false;
        }
      });
    },
    async saveObj() {
      const parameter = {...this.addForm, company_id: localStorage.getItem('companyId') - 0}
      this.loading = true;
      const { data } = this.fromStatus == 'add' ? await notice_save(parameter) : await notice_edit(parameter);
      this.loading = false;
      if (data.status == 100) {
        this.$message.success(this.fromStatus == 'add' ? '添加成功' : '编辑成功')
        this.addForm = {};
        this.initList();
      }
    },
    openForm(e, row) {//发布和编辑公告
      if (e == 'add') {
        this.defaultMsg = ''
        this.fromStatus = 'add';
        this.addForm = {};
        this.dialog = {isShow: true, title: '发布公告' }
        this.defaultMsg = '';
        this.$nextTick(_ => {
          this.$refs.ue.setContent('<br/>'); //清空富文本
        });
      } else {
        this.fromStatus = 'edit';
        this.addForm = Object.assign({}, row);
        this.dialog = {isShow: true, title: '编辑公告' }
        this.defaultMsg = row.notice_content
        this.$nextTick((_ => {
          this.$refs.ue.setContent(this.defaultMsg)
        }))
      }
    }
  },
  created: function() {
    this.initList()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

.ali-bianji {
  cursor: pointer;
  color: #e6a23d;
}

.ali-bin {
  cursor: pointer;
  color: #f56c6c;
}

.iconfont {
  font-size: 18px;
}

.ali-zhiding {
  color: #009900;
  font-size: 20px;
}
</style>
